
						<!-- /PAGE HEADER -->
						<!-- FORMS -->
						<div class="col-md-12">
								<!-- BOX -->
								<div class="box border green">
									<div class="box-title">
										<h4><i class="fa fa-table"></i>会员列表</h4>
										<div class="tools hidden-xs">
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<div id="datatable1_wrapper" class="dataTables_wrapper form-inline" role="grid">
										<div class="row">
										<div class="col-sm-12">
										<div class="pull-right">
											<div class="dataTables_filter" id="datatable1_filter">
												<label>
													<input aria-controls="datatable1" placeholder="Search" class="form-control input-sm" type="text">
												</label>
											</div>
										</div>
										<div class="pull-left"><div id="datatable1_length" class="dataTables_length"><label>Show <select size="1" name="datatable1_length" aria-controls="datatable1" class="form-control input-sm"><option value="10" selected="selected">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> Rows</label></div></div><div class="clearfix"></div></div></div><table id="datatable1" class="datatable table table-striped table-bordered table-hover dataTable" aria-describedby="datatable1_info" cellspacing="0" cellpadding="0" border="0">
											 <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" >ID</th>
                                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 200px;" aria-label="Browser: activate to sort column ascending">头像
                                                    </th>
                                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 200px;" aria-label="Browser: activate to sort column ascending">用户名
                                                    </th>
                                                    <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 100px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">性别
                                                    </th>
                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Platform(s): activate to sort column ascending">出生日期
                                                    </th>
                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 200px;" aria-label="Platform(s): activate to sort column ascending">地址
                                                    </th>
                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 200px;" aria-label="Platform(s): activate to sort column ascending">Email
                                                    </th>
                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Platform(s): activate to sort column ascending">注册时间
                                                    </th>
                                                    <th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Engine version: activate to sort column ascending">登录时间
                                                    </th>
                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="CSS grade: activate to sort column ascending">注销时间
                                                    </th>
                                                    <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 200px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">用户状态
                                                    </th>
                                                    <!-- <th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 90px;" aria-label="Browser: activate to sort column ascending">发布者
                                                    </th> -->

                                                    <th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 352px;" aria-label="Platform(s): activate to sort column ascending">操作
                                                    </th>

                                                </tr>
                                            </thead>

										 <tbody role="alert" aria-live="polite" aria-relevant="all">
                                            <!-- 借助php把数据输出来 -->
                                            <?php foreach($data as $v): ?>
                                            <tr class="gradeA odd">
                                                    <td class="  sorting_1"><?php echo $v['id']?></td>

                                                    <td><img src="<?php echo empty($v['userPicture'])?'zw.jpg':$v['userPicture'];?>" alt="" width="50" height="50"></td>
                                                     <td filed="userName" class="db_edit"><?php echo $v['userName']?></td>
                                                    <td class="center"><?php echo $v['userSex']==1?'男':'女'?></td>
                                                    <td class="hidden-xs"><?php echo $v['userBirthday']?></td>
                                                    <td filed="userAddress" class="center db_edit"><?php echo $v['userAddress']?></td>
                                                    <td filed="userEmail" class="center db_edit"><?php echo $v['userEmail']?></td>
                                                    <td  class="center hidden-xs"><?php echo $v['userRegistred_time']?></td>
                                                    <td  class="center hidden-xs"><?php echo $v['userLogin_time']?></td>
                                                    <td  class="center hidden-xs"><?php echo $v['userOut_time']?></td>

                                                    <td class="center hidden-xs"><!-- status为创建的自定义属性，存储输出测状态值 -->
                                                        <button userStatus="<?php echo $v['userStatus'];?>" class="btn <?php echo ($v['userStatus']==1)?'btn-success':'btn-danger';?>  btn-xs">
                                                            <i class="fa <?php echo ($v['userStatus']==1)?'fa-check':'fa-times';?> "></i>
                                                        </button>
                                                    </td>
                                                    <td class="hidden-xs ">
                                                        <a  href="index.php?&admin=1&c=user&a=edit&id=<?php echo $v['id']?>" class="btn btn-info"><i class="fa fa-pencil-square-o"></i> 编辑</a>
                                                        <a  href="index.php?&admin=1&c=user&a=del&id=<?php echo $v['id']?>" onclick="return confirm('真的要删除吗？')" class="btn btn-danger"><i class="fa fa-trash-o"></i> 删除</a>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                            </tbody>
										</table>
												<div class="row">
													<div class="col-sm-12">
														<div class="pull-left">
														   <div class="dataTables_info" id="datatable1_info">Showing 1 to 10 of 57 entries</div>
														</div>
														<div class="pull-right">
															<div class="dataTables_paginate paging_bs_full" id="datatable1_paginate">
																<ul class="pagination">


																	<?php echo $pages;?>

																</ul>
															</div>
														</div>
														<div class="clearfix">

														</div>
													</div>
												</div>
												</div>
									</div>
								</div>
								<!-- /BOX -->
							</div>

<script src="resources/admin/js/jquery/jquery-2.0.3.min.js"></script>
<script  type="text/javascript" >

$(function(){
	//alert(1);
	//绑定点击事件
	//阻止页面重新加载
	//抓取ul标签的类pagination
	//$('.pagination li').click(function() {
		$('.pagination').on('click', 'li', function() {//记住：li的前面不要加.号！！！！！！

		//获取a标签的href属性的值
		var url=$(this).find('a').attr('href');
		//console.log(url);return false;
		$.ajax({
			type:'get',//发送的请求类型 get/post
			url:url,//请求的路径
			//data:{},//要提交到后台的数据
			dataType:'json',//将后台的返回数据转成js的json格式  打印json结构之前，要先确定输出的数据都是json结构，要不然json会炸掉，这也是为什么这句话是最后才写的原因。
			//async:true; 当ajax发送请求，只要服务器后台没有把数据返回，下面的代码就不会去执行
			//async:true;//将ajax的异步传输修改成同步传输，默认情况下ajax是异步传输（true），但也支持同步传输（false）

			success:function(json){//专门介绍后台服务器返回到前台的数据 回调函数：专门获取程序那边返回的数据，数据统一存储在json变量中
				//console.log(json[0].title);
				//alert(json);
			var html='';

			/*json=array(
				'data'=>$data,//要访问$date,必须要先获取下标'data' ，访问到值$data之后，把它存储到var data变量里面，那么data变量就是$data
				'pages'=>$pages,
				)*/

			var data=json.data;//字符串要用点.
			/*data=array(
					0=>object,
					1=>object,
					2=>object,
				)*/

		  for(i in data){
                html+='<tr class="gradeA odd">';
                    html+='<td class="  sorting_1">'+data[i].id+'</td>';//或者data[i].id可以写成json.data[i].id

                    var userPicture=data[i].userPicture==null?'zw.jpg':data[i].userPicture;
                    html+='<td><img src="'+userPicture+'" alt="" width="50" height="50"></td>';

                    html+='<td filed="userName" class="db_edit">'+data[i].userName+'</td>';

                    var userSex=(data[i].userSex)?'男':'女';
                    html+='<td class="hidden-xs db_edit">'+userSex+'</td>';

                    html+='<td class="center ">'+data[i].userBirthday+'</td>';

                    html+='<td filed="userAddress" class="center hidden-xs db_edit">'+data[i].userAddress+'</td>';

                    html+='<td filed="userEmail" class="hidden-xs db_edit">'+data[i].userEmail+'</td>';

                    html+='<td class="hidden-xs ">'+data[i].userRegistred_time+'</td>';

                    html+='<td class="hidden-xs ">'+data[i].userLogin_time+'</td>';

                    html+='<td class="hidden-xs ">'+data[i].userOut_time+'</td>';

                    var cls=(data[i].userStatus==1)?'btn-success':'btn-danger';//状态按钮类
                    var icon=(data[i].userStatus==1)?'fa-check':'fa-times';//状态按钮类
                    html+='<td class="center hidden-xs">';
                        html+='<button userStatus="'+data[i].userStatus+'" class="btn '+cls+' btn-xs"><i class="fa '+icon+' "></i></button>';
                    html+='</td>';

                    html+='<td class="hidden-xs ">';
                        html+='<a  href="index.php?&admin=1&c=user&a=edit&id='+data[i].id+'" class="btn btn-info">';
                        html+='<i class="fa fa-pencil-square-o"></i> 编辑</a>';
                        html+='<a  href="index.php?&admin=1&c=user&a=del&id='+data[i].id+'>" onclick="return confirm(真的要删除吗？)" class="btn btn-danger">';
                        html+='<i class="fa fa-trash-o"></i> 删除</a>';
                    html+='</td>';
                html+='</tr>';
            }
            //console.log(html);
            $('tbody').html(html);//替换原来显示的数据
            $('.pagination').html(json.pages);//页码替换
        }
	})
		return false;
	});


	//双击编辑列表数据
	//$('.db_edit').dblclick(function(event) {
	//抓取'tbody'父级标签，绑定的时候是给子级'.db_edit'绑定
	$('tbody').on('dblclick','td.db_edit',function(event) {
		//查找所有可编辑的td标签是否有input标签
		//console.log($('tbody :text').length);
		var len=$('tbody :text').length;//查找整个列表页面中是否有一个input标签，并获取它的长度
		if(len>0){//判断：大于01这说明整个列表页面有一个input标签
			//先获取之前已经显示的input标签的val值
			var val=$('tbody :text').val();
			/*
			 1、<td class="hidden-xs db_edit">
				$('tbody :text')-》<input value="继马林之后，中超第二位“下课”的主教练已..." type="text">
			</td>
			替换成：
		   2、<td class="hidden-xs db_edit">
				继马林之后，中超第二位“下课”的主教练已...
			</td>

			那么要做的就是抓取2、里面的td的文本标签，然后改变td标签的文本内容
			那怎么找到td标签呢？即通过我找到的1、里的input标签去找
			*/

			//将显示的input标签val值替换掉input标签即可回复成原来未编辑的效果
			//$('tbody :text')抓取已经显示的input标签，然后在该标签的基础上找到他的父级也就是td标签（使用parent()来查找标签的父级）,找到以后将父级的文本替换掉
			$('tbody :text').parent().text(val);//input的parent()父级就是td,然后把td的text()文本给重新的替换掉
		}

	//纯文本用text()即可，但是用html()也可以。为什么用text()而不用val()：因为val()是针对于input标签的，而td是成对标签，成对标签要用text()
	//获取双击编辑的数据
		var txt=$(this).text();//将获取到得内容存储到变量txt中,之前的值
		//console.log(txt);
		var inp='<input type="text" value="'+txt+'"/>';//将获取到的值拼接到input里面
		//console.log(inp);
		//将要编辑的td内容替换成输入框的形式显示
		$(this).html(inp);
		//获取焦点事件
		$('tbody :text').focus();
		//绑定失去焦点事件
		$('tbody :text').blur(function(event) {
			//alert(txt);

			//抓取要修改的数据id
			var id=$(this).parent().parent().find('td:first').text();
			//console.log($(this).parent().parent().find('td:first').text());
			//获取要修改的字段名
			var filed=$(this).parent().attr('filed');

			/*
			parent()-><tr class="gradeA odd">
				<td class="  sorting_1">2</td>
				<td filed="title" class="db_edit">
					$(this)-><input value="名记曝苏宁主帅卡佩罗下课 或因与管理层意见分歧" type="text">
				</td>
			</tr>
			 */
			//alert(4);
			//先把数据恢复成原来的状态
			//当input标签失去焦点则获取失去焦点的input标签的val值
			var val=$(this).val();//获取原来输入框的值 ,现在的值


			//找到失去焦点的那个input标签的父级，然后用编辑过的新数据替换掉父级（td)的文本内容，让显示效果回复成原来的状态
			$(this).parent().text(val);//找到失去焦点的那个input标签的父级，把input标签干掉

			//优化点击但不修改之后出现的错误提示
			//判断修改的值和之前的值是否一致
			if (val==txt) {
				return false;
			}

			//input标签无跳转功能，所以不用加return false;
			$.ajax({
				type:'post',
				url:'index.php?c=user&a=edit&admin=1',
				data:{
					//'id','val','filed'为edit.php中$_POST的下标
					'id':id,//修改的数据id
					'val':val,//修改的字段的值
					'filed':filed,//修改的字段名
					'userStatus':'-1'//用来充当区分
				},
				success:function(row){//根据返回受影响行数来提示修改是否成功
					if (parseInt(row)>0) {
						alert('修改成功啦');
					}else{
						alert('修改失败啦');
					}
				}
			})

		});
	});

	//状态事件按钮绑定
	//$('td').on('click','btn-xs',function(){
	$('tbody').on('click','button.btn-xs',function(){
		//alert(5);
		//抓取要修改的数据id
		//	    <button> <td>     <tr>
		var id=$(this).parent().parent().find('td:first').text();
		//根据当前按钮状态
		if ($(this).attr('userStatus')>0) {//通过$(this)获取刚刚点击的按钮的自定义状态属性的值，把判断它是否大于0 0表示不通过
			var userStatus=0;//能进到if说明点击的按钮处于通过状态则把它修改成不通过状态
		}else{
			var userStatus=1;
		}
		//修改botton标签的状态属性值
		$(this).attr('userStatus',userStatus);

		//把当前操作的对象存在临时变量里面,因为在ajax的succes回调函数中$(this)这个指向对象发生了改变.
		var obj=$(this);
		//console.log(status);
		$.ajax({
			type:'post',
			url:'index.php?c=user&&a=edit&admin=1',
			data:{
				'id':id,
				'userStatus':userStatus
			},
			success:function(json){
				console.log(json);
				//如果修改成功则修改显示状态
				if(json>0){
					//大于0表示要修改成通过状态
					if(userStatus>0){
						//alert(1);
						//删除原来的状态类
						obj.removeClass('btn-danger');
						//添加新的状态类
						obj.addClass('btn-success');

						//删除原来的图标
						obj.find('i').removeClass('fa-times');
						//添加新的图标
						obj.find('i').addClass('fa-check');
					}else{
						//alert(2);
						//删除原来的状态类
						obj.removeClass('btn-success');
						//添加新的状态类
						obj.addClass('btn-danger');
						//删除原来的图标
						obj.find('i').removeClass('fa-check');
						//添加新的图标
						obj.find('i').addClass('fa-times');
					}
				}

			}
		})


	})
})

</script>